<template>
    <div class="index">
        <div class="left-area-box">
            <my-left-area class="index-left" :leftcontent='leftcontent' :title='title' @leftAreaSuccess='leftAreaSuccess'></my-left-area>
        </div>
        <div class="index-right">
            <!-- 头 -->
            <div class="right-header">
                <div class="header-left">
                    <span>{{headerTitle}}</span>
                </div>
                <div class="header-right">
                    <span>欢迎您，{{uname}}</span>
                    <span style="padding-right:30px;padding-left:15px">{{format(time)}}</span>
                    <span class="out" @click="out()" style="color: #57A7FD;">退出</span>
                </div>
            </div>
            <div class="inner-box">
                <h3 class="pagetitleClick">{{pagetitle}}</h3>
                <router-view/>
            </div>
        </div>
    </div>
</template>
<script>
import myLeftArea from "@/components/assembly/leftArea.vue";
export default {
    components:{myLeftArea},
    data() {
        return {
            title:'简便',//侧边栏标题
            headerTitle:'简便·运营后台',//头标题
            pagetitle:'',//每页标题
            leftcontent:[//侧边栏数据
                {
                    name:'概况',
                    children:[
                        {name:'实时概况',index:'/index'},
                    ],
                },
                {name:'商家管理',
                    children:[
                        {name:'商家列表',index:'/index'},
                    ]
                },
                {name:'团长管理',
                    children:[
                        {name:'团长列表',index:'/index'},
                        {
                            name:'入驻申请',index:'/index',
                            children:[
                                {name:'入驻申请1',index:'/index'},
                                {name:'入驻申请2',index:'/index'},
                                {name:'入驻申请3',index:'/index'},
                            ]
                        },
                        {name:'团长评价',index:'/index'},
                    ]
                },
                {name:'订单管理',
                    children:[
                        {name:'订单明细',index:'/index'},
                    ]
                },
                {name:'财务管理',
                    children:[
                        {name:'财务报表',index:'/index/financialReport'},
                        {name:'申诉订单',index:'/index'},
                        {name:'收款账户',index:'/index'},
                    ]
                },
                {name:'系统管理',
                    children:[
                        {name:'角色管理',index:'/index'},
                        {name:'员工管理',index:'/index'},
                    ]
                },
                {name:'主页配置'},
                {name:'通知公告',
                    children:[
                        {name:'通知消息',index:'/index'},
                        {name:'消息类型',index:'/index'},
                    ]
                },
                {name:'在线客服'},
                {name:'操作日志',
                    children:[
                        {name:'操作日志',index:'/index'},
                    ]
                },
            ],
            uname:'',//用户名称
            time:'',//实时时间
        }
    },
    mounted(){
        this.uname=sessionStorage.getItem('uname')
        setInterval(() => {
            this.time=Date.parse(new Date())
        }, 1000);
    },
    methods: {
        leftAreaSuccess(pagetitle){
            this.pagetitle=pagetitle
        },
        //退出
        out(){
            sessionStorage.clear();
            this.$store.commit('out_mutation')
            this.$router.push('/')
            window.location.reload()
        },
        //时间戳
        format(shijianchuo) {
            var time = new Date(shijianchuo);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
}
</script>
<style scoped>
.index{
    /* width: 100vw; */
    min-width: 1080px;
    min-height: 100vh;
    display: flex;
}
.left-area-box{
    width: 204px;
}
.index-left{
    width: 204px;
    transition: all .3s;
    position: fixed;
}
.index-right{
    width: calc(100% - 204px);
    background: rgb(240, 240, 240);
}
.right-header{
    width: 100%;
    height: 86px;
    padding:0 30px;
    box-sizing: border-box;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
.header-left{
    font-size: 23px;
    color: #333333;
    display: flex;
    align-items: center;
}
.header-right{
    font-size: 16px;
    color: #666;
}
.inner-box{
    padding:20px 20px 40px 20px ;
    background: #fff;
    margin: 10px 0 0 10px;
    position: relative;
    color: #333333;
	height: calc(100% - 86px - 10px);
}
/* h3标题 */
.pagetitleClick{
    font-size: 20px;
    color: #333;
    font-weight: 400;
}
</style>